.flex-box-mixins (@column, @justify, @align) {
  flex-direction: @column;
  justify-content: @justify;
  align-items: @align;
}

// 基础 Flexbox 容器
.flex-container() {
  display: flex;
  flex-wrap: nowrap; // 默认不换行
}

// 方向设置
.flex-row() {
  flex-direction: row;
}

.flex-column() {
  flex-direction: column;
}

// 对齐方式
.justify-start() {
  justify-content: flex-start;
}

.justify-end() {
  justify-content: flex-end;
}

.justify-center() {
  justify-content: center;
}

.justify-between() {
  justify-content: space-between;
}

.justify-around() {
  justify-content: space-around;
}

.align-start() {
  align-items: flex-start;
}

.align-end() {
  align-items: flex-end;
}

.align-center() {
  align-items: center;
}

.align-stretch() {
  align-items: stretch; // 默认行为
}

.align-baseline() {
  align-items: baseline;
}

// 组合类
.flex {
  .flex-container();
}

.flex-row {
  .flex;
  .flex-row();
}

.flex-column {
  .flex;
  .flex-column();
  .align-start()
}

.flex-column-end {
  .flex;
  .flex-column();
  .align-end();
}

.flex-center {
  .flex;
  .justify-center();
  .align-center();
}

.flex-column-center {
  .flex;
  .flex-column();
  .align-center();
}

.flex-space-between {
  .flex;
  .justify-between();
}

.flex-row-end{
  .flex;
  .justify-end();
}

.flex-row-center{
  .flex;
  .justify-center();
}

.flex-align-center{
  .align-center();
}

.flex-align-start{
  .align-start();
}


.flex-space-around {
  .flex;
  .justify-around();
}

.flex-wrap {
  .flex;
  flex-wrap: wrap;
}

.flex-nowrap {
  .flex;
  flex-wrap: nowrap;
}

// 项目样式
.flex-item {
  flex: 1; // 默认占满可用空间
  min-width: 0; // 解决溢出问题
}

// 示例修改
.flex-item-grow {
  flex-grow: 1; // 增长
}

.flex-item-shrink {
  flex-shrink: 1; // 收缩
}

.flex-item-basis {
  flex-basis: auto; // 基础大小
}

// 自定义字体大小
.font-size(@size) {
  font-size: unit(@size, px);
}

// 自定义字体粗细
.font-weight(@weight) {
  font-weight: @weight;
}

.width(@w) {
  width: unit(@w, px);
}

.height(@h) {
  height: unit(@h, px);
}


@fontSize: range(10, 150, 2);
each(@fontSize, {
  .set-font-@{value} {
    .font-size(@value)
  }
});

@fontWeight: range(100, 1000, 100);
each(@fontWeight, {
  .set-weight-@{value} {
    .font-weight(@value)
  }
});

@variable1: range(0, 500, 1);
each(@variable1, {
  .set-width-@{value} {
    .width(@value)
  }
});

@height: range(0, 500, 1);
each(@variable1, {
  .set-height-@{value} {
    .height(@value)
  }
});

// @sizes: range(0, 200, 2);
// .set-margin-padding(@property, @value) {
//     @{property}: @value;
// }

// .generate-margin-padding(@property) {
//     each(@sizes, {
//         .set-margin-padding(@property, @value);
//         .set-margin-padding(@property + '-top', @value);
//         .set-margin-padding(@property + '-right', @value);
//         .set-margin-padding(@property + '-bottom', @value);
//         .set-margin-padding(@property + '-left', @value);
//     });
// }

// // 生成 margin 和 padding 的类
// .generate-margin-padding(margin);
// .generate-margin-padding(padding);